@import '../../mixins'

.PinnedDock
  box(relative, flex)
  z-index: 2001
  background-color: var(--bg)
  background-image: var(--bg-img)
  background-size: var(--bg-size)
  &[data-empty]
    box(none)

// Per-Panel
#root[data-pinned-tabs-position="panel"] .PinnedDock
  size(100%, auto)
  flex-wrap: wrap
  flex-direction: row
  box-shadow: inset 0 -1px 0 0 var(--border-fg),
              inset 0 0 8px 0 #00000032

#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list] .PinnedDock
  padding: 0 0 7px

// Left
#root[data-pinned-tabs-position="left"] .PinnedDock
  size(auto, 100%)
  z-index: 2000
  flex-direction: column
  padding: 1px 1px 0 0
  box-shadow: inset -1px 0 0 0 var(--border-fg),
              inset 0 0 8px 0 #00000032

// Right
#root[data-pinned-tabs-position="right"] .PinnedDock
  size(auto, 100%)
  z-index: 2000
  flex-direction: column
  padding: 1px 0 0 1px
  box-shadow: inset 1px 0 0 0 var(--border-fg),
              inset 0 0 8px 0 #00000032

// Top
#root[data-pinned-tabs-position="top"] .PinnedDock
  size(100%, auto)
  z-index: 2001
  flex-wrap: wrap
  flex-direction: row
  box-shadow: inset 0 1px 0 0 var(--border-fg),
              inset 0 -1px 0 0 var(--border-fg),
              inset 0 0 8px 0 #00000032

// ---
// -- Background overlay
// -
.PinnedDock:before
  content: ''
  box(absolute)
  pos(0, 0)
  size(100%, same)
  background-color: var(--pinned-dock-overlay-bg)
  box-shadow: var(--pinned-dock-overlay-shadow)

#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list] .PinnedDock:before
  box(none)

// ---
// -- Separator
// -
.PinnedDock:after
  content: ''
  box(absolute, none)
  pos(b: 0px, l: 0)
  size(100%, 8px)
  background-color: #00000012
  box-shadow: inset 0 -1px 0 0 var(--border-active-fg), inset 0 1px 0 0 var(--border-active-fg)

#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list] .PinnedDock:after
  box(block)

// ---
// -- The last drop position
// -
.PinnedDock .to-the-end
  box(relative)
  opacity: 0
  transition: opacity var(--d-fast)
  &:before
    content: ''
    box(absolute)
    pos(0, 0)
    background-color: var(--tabs-update-badge-bg)

#root[data-pinned-tabs-position="panel"] .PinnedDock .to-the-end
#root[data-pinned-tabs-position="top"] .PinnedDock .to-the-end
  &:before
    width: 1px
    height: var(--tabs-pinned-height)

#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list] .PinnedDock .to-the-end
  width: 100%
  &:before
    top: -1px
    width: 100%
    height: 1px

#root[data-pinned-tabs-position="left"] .PinnedDock .to-the-end
#root[data-pinned-tabs-position="right"] .PinnedDock .to-the-end
  &:before
    width: var(--tabs-pinned-width)
    height: 1px

.PinnedDock[data-drag-pointed] .to-the-end
  opacity: 1
